<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>我的</text>
			</view>
			<view class="head_mid">
				礼物中心
			</view>
			<view class="head_right">
				<!-- <image class="head_right" src="../../../static/jingjie/search.png" mode=""></image> -->
			</view>
		</view>
		<!-- <view class="menu_box">
			<view class="left_box">
				<view class="" v-for="(item,index) in menuList" :key="index" @tap="selectMenu(index)" :class="{fontActive:index===menuIndex}">
					{{item}}
					<view v-show="menuIndex===index" class="data-active"></view>
				</view>
			</view>
		</view> -->

		<scroll-view class="scroll-box match-view" scroll-x>
			<view class="padding-scroll-box">
				<view class="menu_item" v-for="(item,index) in menuList" :key="index" @tap="selectMenu(index)" :class="{fontActive:index===menuIndex}">
					{{item}}
					<view v-show="menuIndex===index" class="data-active"></view>
				</view>
			</view>
		</scroll-view>
		<view class="body" v-if="menuIndex==0">
			<view class="marginLeft flexBox">
				<picker class="fontStyle" mode="date" fields="month" start="1971-01-01" :end="endDate" @change="starDateChange">
					<view class="uni-input" v-if="starDate==''">请选择<image class="down" src="../../../static/diqiuquan/down.png" mode=""></image>
					</view>
					<view class="uni-input" v-else>{{starDate}}
						<image class="down" src="../../../static/diqiuquan/down.png" mode=""></image>
					</view>

				</picker>
				<text style="padding-left: 10upx;">--</text>
				<picker class="fontStyle rightText" fields="month" mode="date" :start="starDate" :end="endDate" @change="closeDateChange">
					<view class="uni-input" v-if="closeDate==''">请选择<image class="down" src="../../../static/diqiuquan/down.png" mode=""></image>
					</view>
					<view class="uni-input" v-else>{{closeDate}}
						<image class="down" src="../../../static/diqiuquan/down.png" mode=""></image>
					</view>
					<!-- <image class="down" src="../../../static/diqiuquan/down.png" mode=""></image> -->
				</picker>

			</view>
			<!-- <text class="todaymoney">今日收到2000猫币</text> -->
			<view class="gift_List">
				<view class="gift_item" v-for="(item,index) in getMoneyList" :key="index">
					<view class="gift_left">
						<view class="head_box">
							<image class="headImg" :src="item.map.userinfo.avatar" mode=""></image>
							<image class="countryImg" :src="item.map.userinfo.national_flag" mode=""></image>
						</view>
						<view class="name_box">
							<view class="name_top">
								<text>{{item.map.userinfo.nick_name}}</text>
								<image v-if="item.map.userinfo.sex==1" class="sex" src="../../../static/man.png" mode=""></image>
								<image v-els class="sex" src="../../../static/woman.png" mode=""></image>
								<image v-if="item.map.userinfo.member_level==1" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image v-else-if="item.map.userinfo.member_level==2" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image v-else-if="item.map.userinfo.member_level==3" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image class="vip" v-else src="../../../static/wode/huiyuan2.png" mode=""></image>
							</view>
							<view class="name_bottom">
								{{item.create_time}}
							</view>
						</view>
					</view>
					<view class="gift_mid">
						<view class="gift_message">
							<image class="giftImg" :src="item.giftinfo.pic" mode=""></image>
							<text class="giftname">{{item.giftinfo.gift_name}}</text>
							<text class="giftmoney">{{item.pay_count}}猫币</text>
						</view>
						<view class="giftnum">
							x{{item.gift_count}}
						</view>
					</view>
					<view class="gift_right">
						<view class="gift_back" @tap="backGift(item.map.userinfo.user_id)">
							回赠
						</view>
						<view class="gift_from">
							来自
							<text v-if="item.source=='note'" @tap="toDetail(item.map.noteinfo.id,item.source)">#地球圈</text>
							<text v-else-if="item.source=='user'" @tap="toDetail(item.map.userinfo.user_id,item.source)">#个人详情</text>
							<text v-else-if="item.source=='chat'">#聊天</text>
							<text v-else-if="item.source=='rebate'">#回赠</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="body" v-else-if="menuIndex==1">
			<view class="marginLeft flexBox">
				<picker class="fontStyle" mode="date" fields="month" start="1971-01-01" :end="endDate" @change="starDateChange">
					<view class="uni-input" v-if="starDate==''">请选择<image class="down" src="../../../static/diqiuquan/down.png" mode=""></image>
					</view>
					<view class="uni-input" v-else>{{starDate}}
						<image class="down" src="../../../static/diqiuquan/down.png" mode=""></image>
					</view>

				</picker>
				<text style="padding-left: 10upx;">--</text>
				<picker class="fontStyle rightText" fields="month" mode="date" :start="starDate" :end="endDate" @change="closeDateChange">
					<view class="uni-input" v-if="closeDate==''">请选择<image class="down" src="../../../static/diqiuquan/down.png" mode=""></image>
					</view>
					<view class="uni-input" v-else>{{closeDate}}
						<image class="down" src="../../../static/diqiuquan/down.png" mode=""></image>
					</view>
					<!-- <image class="down" src="../../../static/diqiuquan/down.png" mode=""></image> -->
				</picker>

			</view>
			<!-- <text class="todaymoney">今日收到猫币</text> -->
			<view class="gift_List">
				<view class="gift_item" v-for="(item,index) in setMoneyList" :key="index">
					<view class="gift_left">
						<view class="head_box">
							<image class="headImg" :src="item.map.payinfo.avatar" mode=""></image>
							<image class="countryImg" :src="item.map.payinfo.national_flag" mode=""></image>
						</view>
						<view class="name_box">
							<view class="name_top">
								<text>{{item.map.payinfo.nick_name}}</text>
								<image v-if="item.map.payinfo.sex==1" class="sex" src="../../../static/man.png" mode=""></image>
								<image v-els class="sex" src="../../../static/woman.png" mode=""></image>
								<image v-if="item.map.payinfo.member_level==1" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image v-else-if="item.map.payinfo.member_level==2" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image v-else-if="item.map.payinfo.member_level==3" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image class="vip" v-else src="../../../static/wode/huiyuan2.png" mode=""></image>
							</view>
							<view class="name_bottom">
								{{item.create_time}}
							</view>
						</view>
					</view>
					<view class="gift_mid">
						<view class="gift_message">
							<image class="giftImg" :src="item.giftinfo.pic" mode=""></image>
							<text class="giftname">{{item.giftinfo.gift_name}}</text>
							<text class="giftmoney">{{item.pay_count}}猫币</text>
						</view>
						<view class="giftnum">
							x{{item.gift_count}}
						</view>
					</view>
					<view class="gift_right">
						<view class="gift_from">
							<text v-if="item.source=='note'" @tap="toDetail(item.map.noteinfo.id,item.source)">#地球圈</text>
							<text v-else-if="item.source=='user'" @tap="toDetail(item.map.userinfo.user_id,item.source)">#个人详情</text>
							<text v-else-if="item.source=='chat'">#聊天</text>
							<text v-else-if="item.source=='rebate'">#回赠</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="body" v-else-if="menuIndex==2">
			<view class="littleMenu">
				<view class="little_item" v-for="(item,index) in bangdan" :key="index" :class="{active:littleIndex==index}" @tap="selectLittleMenu(index)">
					{{item}}
				</view>
			</view>
			<view class="padding-box">
				<view class="List_item" v-for="(item,index) in moneyList" :key="index">
					<text v-if="index==0" class="paiming" v-text="index+1"></text>
					<text v-else-if="index==1" class="paiming paiming2" v-text="index+1"></text>
					<text v-else-if="index==2" class="paiming paiming3" v-text="index+1"></text>
					<text v-else-if="index==3" class="paiming paiming4" v-text="index+1"></text>
					<text v-else-if="index>=4" class="paiming paiming5" v-text="index+1"></text>
					<view class="gift_left">
						<view class="head_box">
							<image class="headImg" :src="item.map.userinfo.avatar" mode=""></image>
							<image class="countryImg" :src="item.map.userinfo.national_flag" mode=""></image>
						</view>
						<view class="name_box">
							<view class="name_top">
								<text>{{item.map.userinfo.nick_name}}</text>
								<image v-if="item.map.userinfo.sex==1" class="sex" src="../../../static/man.png" mode=""></image>
								<image v-els class="sex" src="../../../static/woman.png" mode=""></image>
								<image v-if="item.map.userinfo.member_level==1" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image v-else-if="item.map.userinfo.member_level==2" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image v-else-if="item.map.userinfo.member_level==3" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image class="vip" v-else src="../../../static/wode/huiyuan2.png" mode=""></image>
							</view>
							<view class="name_bottom">
								累计贡献:{{item.pay_count}}猫币
							</view>
						</view>
					</view>
					<view class="gift_back">
						回赠
					</view>
				</view>
			</view>

		</view>
		<view class="body" v-else-if="menuIndex==3||menuIndex==4">
			<view class="littleMenu">
				<view class="little_item" v-for="(item,index) in bangdan" :key="index" :class="{active:littleIndex==index}" @tap="selectLittleMenu(index)">
					{{item}}
				</view>
			</view>
			<view class="padding-box" v-if="menuIndex==3">
				<view class="List_item" v-for="(item,index) in getAllMoneyList" :key="index">
					<text v-if="index==0" class="paiming" v-text="index+1"></text>
					<text v-else-if="index==1" class="paiming paiming2" v-text="index+1"></text>
					<text v-else-if="index==2" class="paiming paiming3" v-text="index+1"></text>
					<text v-else-if="index==3" class="paiming paiming4" v-text="index+1"></text>
					<text v-else-if="index>=4" class="paiming paiming5" v-text="index+1"></text>
					<view class="gift_left">
						<view class="head_box">
							<image class="headImg" :src="item.map.payinfo.avatar" mode=""></image>
							<image class="countryImg" :src="item.map.payinfo.national_flag" mode=""></image>
						</view>
						<view class="name_box">
							<view class="name_top">
								<text>{{item.map.payinfo.nick_name}}</text>
								<image v-if="item.map.userinfo.sex==1" class="sex" src="../../../static/man.png" mode=""></image>
								<image v-els class="sex" src="../../../static/woman.png" mode=""></image>
								<image v-if="item.map.userinfo.member_level==1" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image v-else-if="item.map.userinfo.member_level==2" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image v-else-if="item.map.userinfo.member_level==3" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image class="vip" v-else src="../../../static/wode/huiyuan2.png" mode=""></image>
							</view>
							<view class="name_bottom">
								累计贡献:{{item.pay_count}}猫币
							</view>
						</view>
					</view>
					<view class="gift_back gift_back1">

					</view>
				</view>
			</view>
			<view class="" v-else-if="menuIndex==4">
				<view class="List_item" v-for="(item,index) in setAllMoneyList" :key="index">
					<text v-if="index==0" class="paiming" v-text="index+1"></text>
					<text v-else-if="index==1" class="paiming paiming2" v-text="index+1"></text>
					<text v-else-if="index==2" class="paiming paiming3" v-text="index+1"></text>
					<text v-else-if="index==3" class="paiming paiming4" v-text="index+1"></text>
					<text v-else class="paiming paiming5" v-text="index+1"></text>
					<view class="gift_left">
						<view class="head_box">
							<image class="headImg" :src="item.map.userinfo.avatar" mode=""></image>
							<image class="countryImg" :src="item.map.userinfo.national_flag" mode=""></image>
						</view>
						<view class="name_box">
							<view class="name_top">
								<text>{{item.map.userinfo.nick_name}}</text>
								<image v-if="item.map.userinfo.sex==1" class="sex" src="../../../static/man.png" mode=""></image>
								<image v-els class="sex" src="../../../static/woman.png" mode=""></image>
								<image v-if="item.map.userinfo.member_level==1" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image v-else-if="item.map.userinfo.member_level==2" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image v-else-if="item.map.userinfo.member_level==3" class="vip" src="../../../static/wode/huiyuan.png" mode=""></image>
								<image class="vip" v-else src="../../../static/wode/huiyuan2.png" mode=""></image>
							</view>
							<view class="name_bottom">
								累计贡献:{{item.pay_count}}猫币
							</view>
						</view>
					</view>
					<view class="gift_back gift_back1">

					</view>
				</view>
			</view>

		</view>
		<gift :isshowGift='isshowGift' :cat_coin='myInfo.cat_coin' :pay_id='pay_id' :payment_id='payment_id' @hideAll='hideAll'></gift>
		<mask :isShowMask='isShowMask' @closeMask='closeMask'></mask>

	</view>
</template>

<script>
	import mask from '../../../components/mask.vue'
	import gift from '../../../components/gift.vue'
	export default {
		components: {
			mask,
			gift
		},
		data() {
			return {
				menuList: ['收入', '赠送', '贡献榜', '平台收入榜', '平台贡献榜'],
				bangdan: ['日榜', '月榜', '总榜'],
				menuIndex: 0,
				littleIndex: 0,
				starDate: '',
				closeDate: '',
				getMoneyList: [], //收入榜
				setMoneyList: [], //赠送榜
				moneyList: [], //贡献榜
				getAllMoneyList: [], //平台收入榜
				setAllMoneyList: [], //平台贡献榜
				isshowGift: false,
				isShowMask: false,
				myInfo: '',
				pay_id: '',
				payment_id: '',
				endDate: '',
				currentPage: 1, //页数
			}
		},
		onPullDownRefresh() {
			this.currentPage = 1;
			if (this.menuIndex == 0) {
				this.getMoneyList = [];
				this.getGetMoney();
			} else if (this.menuIndex == 1) {
				this.setMoneyList = [];
				this.getSetMoney()
			} else if (this.menuIndex == 2) {
				this.moneyList = [],
					this.getMoney()
			} else if (this.menuIndex == 3) {
				this.getAllMoneyList = []
				this.getAllGetMoney()
			} else if (this.menuIndex == 4) {
				this.setAllMoneyList = []
				this.getAllSetMoney()
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.currentPage++;
			if (this.menuIndex == 0) {
				this.getAllMoneyList = []
				this.getGetMoney();
			} else if (this.menuIndex == 1) {
				this.getSetMoney()
			} else if (this.menuIndex == 2) {
				this.getMoney()
			} else if (this.menuIndex == 3) {
				this.getAllGetMoney()
			} else if (this.menuIndex == 4) {
				this.getAllSetMoney()
			}
		},
		onLoad() {
			this.myInfo = uni.getStorageSync('user_info')

			this.getGetMoney()
			this.getEndDate()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getEndDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				// year = year + 2;
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				this.endDate = `${year}-${month}-${day}`;
			},
			selectMenu(index) {
				this.menuIndex = index;
				this.currentPage = 1
				if (this.menuIndex == 0) {
					this.starDate = ''
					this.closeDate = ''
					this.getMoneyList = []
					this.getGetMoney()
				} else if (this.menuIndex == 1) {
					this.starDate = ''
					this.closeDate = ''
					this.setMoneyList = []
					this.getSetMoney()
				} else if (this.menuIndex == 2) {
					this.littleIndex = 0
					this.moneyList = []
					this.getMoney()
				} else if (this.menuIndex == 3) {
					this.littleIndex = 0
					this.getAllMoneyList = []
					this.getAllGetMoney()
				} else if (this.menuIndex == 4) {
					this.littleIndex = 0
					this.setAllMoneyList = []
					this.getAllSetMoney()
				}
			},
			selectLittleMenu(index) {
				this.littleIndex = index;
				if (this.menuIndex == 2) {
					this.getMoney()
				} else if (this.menuIndex == 3) {
					this.getAllGetMoney()
				} else if (this.menuIndex == 4) {
					this.getAllSetMoney()
				}
			},
			starDateChange: function(e) {
				this.starDate = e.target.value
				if (this.closeDate != '') {
					if (this.menuIndex == 0) {
						this.currentPage = 1
						this.getMoneyList = []
						this.getGetMoney()
					} else if (this.menuIndex == 1) {
						this.currentPage = 1
						this.setMoneyList = []
						this.getSetMoney()
					}
				}
			},
			closeDateChange: function(e) {
				this.closeDate = e.target.value
				if (this.starDate != '') {
					if (this.menuIndex == 0) {
						this.currentPage = 1
						this.getMoneyList = []
						this.getGetMoney()
					} else if (this.menuIndex == 1) {
						this.currentPage = 1
						this.setMoneyList = []
						this.getSetMoney()
					}
				}
			},
			toDetail(id, type) {
				if (type == 'note') {
					if (id != null) {
						uni.navigateTo({
							url: '/pages/World/earthDetail/earthDetail?id=' + id
						})
					} else {
						uni.showToast({
							title: '不存在或已被删除',
							icon: 'none'
						})
					}
				} else if (type == 'user') {
					uni.navigateTo({
						url: '/pages/My/myDetails/myDetails?user_id=' + id
					})
				}
			},
			backGift(id) {
				this.isShowMask = true;
				this.isshowGift = true;
				this.payment_id = id;
				this.pay_id = uni.getStorageSync('user_id')
			},
			hideAll() {
				this.isShowMask = false;
				this.isshowGift = false;
			},
			closeMask() {
				this.isShowMask = false;
				this.isshowGift = false;
			},
			getMonthDays(year, month) { //根据年月获取天数
				var stratDate = new Date(year, month - 1, 1),
					endData = new Date(year, month, 1);
				var days = (endData - stratDate) / (1000 * 60 * 60 * 24);
				return days;
			},

			getGetMoney() {
				var me = this;
				var data = {
					payment_id: uni.getStorageSync('user_id'),
					type: 'gift',
					currentPage: this.currentPage
				}
				if (this.starDate != '' && this.closeDate !== '') {
					data.start_time = this.starDate + '-01'
					var dayNum = this.getMonthDays(this.closeDate.split('-')[0], this.closeDate.split('-')[1])
					data.end_time = this.closeDate + '-' + dayNum
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userOrder',
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {
						// console.log(res,'收入')
						if (res.data.data != null && res.data.data.length != 0) {
							var NewgetMoneyList = res.data.data
							for (var i = 0; i < NewgetMoneyList.length; i++) {


								if (NewgetMoneyList[i].map.giftinfo.length == 0) {
									NewgetMoneyList.splice(i, 1)
								}
								NewgetMoneyList[i].giftinfo = NewgetMoneyList[i].map.giftinfo[0]
								me.getMoneyList.push(NewgetMoneyList[i])
							}

							console.log(me.getMoneyList, '收入')
						}

					}
				})
			},
			getSetMoney() {
				var me = this;
				var data = {
					user_id: uni.getStorageSync('user_id'),
					type: 'gift',
					currentPage: this.currentPage
				}
				if (this.starDate != '' && this.closeDate !== '') {
					data.start_time = this.starDate + '-01'
					// data.end_time = this.closeDate
					var dayNum = this.getMonthDays(this.closeDate.split('-')[0], this.closeDate.split('-')[1])
					data.end_time = this.closeDate + '-' + dayNum
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userOrder',
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {
						console.log(res, '赠送')
						if (res.data.data.length != 0 && res.data.data != null) {
							var newsetMoneyList = res.data.data
							for (var i = 0; i < newsetMoneyList.length; i++) {
								if (newsetMoneyList[i].map.giftinfo.length == 0) {
									newsetMoneyList.splice(i, 1)
								}
								newsetMoneyList[i].giftinfo = newsetMoneyList[i].map.giftinfo[0]
								me.setMoneyList.push(newsetMoneyList[i])
							}

						}

					}
				})
			},
			getMoney() {
				var me = this;
				var myDate = new Date()
				var data = {
					payment_id: uni.getStorageSync('user_id'),
					type: 'gift',
					currentPage: this.currentPage
				}
				if (this.littleIndex == 0) {
					data.start_time = myDate.toLocaleDateString().replace(/\//g, "-")
					data.end_time = myDate.toLocaleDateString().replace(/\//g, '-')
				} else if (this.littleIndex == 1) {
					var mouth = myDate.getMonth() + 1
					data.start_time = myDate.getFullYear() + '-' + mouth + '-' + '1'
					data.end_time = myDate.toLocaleDateString().replace(/\//g, '-')
				}

				this.myAjaxNew({
					model: 'user',
					controllerName: 'userOrder',
					actionName: 'queryUserRankingListPage',
					data: data,
					successBack: function(res) {
						console.log(res, '贡献')
						if (res.data.data.length != 0 && res.data.data != null) {
							var newmoneyList = res.data.data
							for (var i = 0; i < newmoneyList.length; i++) {
								me.moneyList.push(newmoneyList[i])
							}
						}
					}
				})
			},
			getAllGetMoney() {
				var me = this;
				var myDate = new Date()
				var data = {
					type: 'gift',
					currentPage: this.currentPage
				}
				if (this.littleIndex == 0) {
					data.start_time = myDate.toLocaleDateString().replace(/\//g, "-")
					data.end_time = myDate.toLocaleDateString().replace(/\//g, '-')
				} else if (this.littleIndex == 1) {
					var mouth = myDate.getMonth() + 1
					data.start_time = myDate.getFullYear() + '-' + mouth + '-' + '1'
					data.end_time = myDate.toLocaleDateString().replace(/\//g, '-')
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userOrder',
					actionName: 'queryPaymentRankingListPage',
					data: data,
					successBack: function(res) {
						console.log(res, '平台收入')
						if (res.data.data.length != 0 && res.data.data != null) {
							var newgetAllMoneyList = res.data.data
							for (var i = 0; i < newgetAllMoneyList.length; i++) {
								me.getAllMoneyList.push(newgetAllMoneyList[i])
							}
						}
					}
				})
			},
			getAllSetMoney() {
				var me = this;
				var myDate = new Date()
				var data = {
					type: 'gift',
					currentPage: this.currentPage
				}
				if (this.littleIndex == 0) {
					data.start_time = myDate.toLocaleDateString().replace(/\//g, "-")
					data.end_time = myDate.toLocaleDateString().replace(/\//g, '-')
				} else if (this.littleIndex == 1) {
					var mouth = myDate.getMonth() + 1
					data.start_time = myDate.getFullYear() + '-' + mouth + '-' + '1'
					data.end_time = myDate.toLocaleDateString().replace(/\//g, '-')
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userOrder',
					actionName: 'queryUserRankingListPage',
					data: data,
					successBack: function(res) {
						console.log(res, '平台贡献')
						if (res.data.data.length != 0 && res.data.data != null) {
							var newsetAllMoneyList = res.data.data
							for (var i = 0; i < newsetAllMoneyList.length; i++) {
								me.setAllMoneyList.push(newsetAllMoneyList[i])
							}
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.head {
		width: 100%;
		height: 162upx;
		position: fixed;
		top: 0;
		display: flex;
		justify-content: space-between;
		font-size: 32upx;
		padding: 0 24upx;
		background: #ffffff;
		box-sizing: border-box;
		z-index: 9999;
		align-items: center;
	}

	.head_left image {
		height: 36upx;
		width: 20upx;
		margin-right: 9upx;
	}

	.head_left {
		display: flex;
		align-items: center;
		color: #666666;
		padding-top: 70upx;
	}

	.head_mid {
		font-size: 36upx;
		color: #333333;
		padding-top: 90upx;
	}

	.head_right {
		width: 92upx;
	}

	.head_right image {
		width: 28upx;
		height: 28upx;
		margin-left: 68upx;
	}

	.menu_box {
		width: 100%;
		height: 85upx;
		background-color: white;
		border-bottom: 1upx solid #ECECEC;
		padding: 0 40upx;
		position: fixed;
		top: 128upx;
		z-index: 22;
	}

	.left_box {
		width: auto;
		overflow: hidden;
		overflow: scroll;
		float: right;
	}

	.scroll-box {
		background: #FFFFFF;
		margin-top: 88upx;
		/* margin-bottom: 10upx; */
		border-top: 20upx solid rgba(245, 245, 245, 1);
		border-bottom: 10upx solid rgba(245, 245, 245, 1);
		/* padding: 20upx 0; */
		position: fixed;
		top: 38upx;
		z-index: 200;
	}

	.padding-scroll-box {
		display: inline-flex;
		overflow-x: scroll;
		white-space: nowrap;
		box-sizing: border-box;
		padding: 0 10upx;
	}

	.menu_item {
		padding: 30upx 24upx 20upx 24upx;
		color: #999999;
		font-size: 36upx;
	}

	.fontActive {
		color: #46CECF;
	}

	.data-active {
		height: 6upx;
		background-color: #46CECF;
		border-radius: 8upx;
		position: relative;
		top: 12upx;
		width: 32upx;
		margin: 0 auto;
	}

	.body {
		background: #FFFFFF;
	}

	.marginLeft {
		display: flex;
		padding: 10upx 24upx;
		align-items: center;
		/* margin-top: 240upx; */
		position: fixed;
		top: 240upx;
		background: #FFFFFF;
		z-index: 200;
		width: 100%;
	}

	.down {
		width: 24upx;
		height: 14upx;
	}

	.fontStyle {
		display: flex;
		align-items: center;
	}

	.todaymoney {
		padding: 10upx 24upx;
		color: #999999;
		font-size: 26upx;
	}

	.gift_List {
		/* padding: 0 24upx; */
		padding-top: 310upx;
	}

	.gift_item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30upx 24upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.gift_left {
		display: flex;
	}

	.head_box {
		position: relative;
		margin-right: 10upx;
	}

	.headImg {
		width: 106upx;
		height: 106upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.countryImg {
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		bottom: 0upx;
		left: 0upx;
	}

	.name_box {
		display: flex;
		flex-direction: column;
		justify-content: space-around
	}

	.name_top {
		display: flex;
		align-items: center;
	}

	.name_top text {
		max-width: 200upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #333333;
		font-size: 30upx;
	}

	.sex {
		width: 26upx;
		height: 26upx;
		margin: 0 10upx;
	}

	.vip {
		width: 30upx;
		height: 30upx;
	}

	.name_bottom {
		color: #CCCCCC;
		font-size: 24upx;
	}

	.gift_mid {
		position: absolute;
		left: 420upx;
		top: 26upx;
		display: flex;
		align-items: center;
	}

	.giftImg {
		width: 90upx;
		height: 75upx;
	}

	.gift_message {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.giftname {
		color: #999999;
		font-size: 24upx;
		margin-top: 10upx;
	}

	.giftnum {
		color: #333333;
		font-size: 28upx;
		margin-left: 10upx;
	}

	.gift_message .giftmoney {
		/* width: 92upx; */
		/* height: 30upx; */
		padding: 5upx;
		background: #47CECF;
		opacity: 0.6;
		color: #FFFFFF;
		font-size: 24upx;
		border-radius: 8upx;
		transform: rotate(-30deg);
		position: absolute;
		top: 10upx;
		white-space: nowrap
	}

	.gift_right {
		display: flex;
		align-items: flex-end;
		flex-direction: column;
		justify-content: space-between;
	}

	.gift_back {
		width: 120upx;
		height: 60upx;
		border: 1upx solid #47CECF;
		border-radius: 10upx;
		color: #47CECF;
		font-size: 32upx;
		text-align: center;
		line-height: 60upx;
	}

	.gift_back1 {
		border: 1upx solid #FFFFFF;
	}

	.gift_from {
		color: #999999;
		font-size: 24upx;
	}

	.gift_from text {
		color: #47CECF;
		text-decoration: underline
	}

	.littleMenu {
		display: flex;
		align-items: center;
		justify-content: center;
		/* margin-top: 240upx; */
		height: 80upx;
		position: fixed;
		top: 240upx;
		background: #FFFFFF;
		z-index: 200;
	}

	.little_item {
		width: 130upx;
		height: 60upx;
		color: #999999;
		font-size: 32upx;
		margin: 0 60upx;
		text-align: center;
		line-height: 60upx;
		border-radius: 60upx;
	}

	.active {
		background: #47CECF;
		color: #FFFFFF;
	}

	.padding-box {
		padding-top: 300upx;
	}

	.List_item {
		display: flex;
		padding: 30upx 24upx;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1upx solid #E6E6E6;
	}

	.paiming {
		width: 24upx;
		height: 59upx;
		font-size: 80upx;
		font-family: PingFang-SC-Heavy;
		font-weight: bold;
		color: rgba(254, 209, 0, 1);
		margin-bottom: 50upx;
	}

	.paiming2 {
		color: #FE9500;
	}

	.paiming3 {
		color: #FF5A5A;
	}

	.paiming4 {
		color: #FF6A91;
	}

	.paiming5 {
		color: #6ABBFF;
	}
</style>
